<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TPO首页</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
</head>
<body>
<div id="wrap">
    <!--主页-->
    <div class="ho_content" v-show="isShowHome">
        <img class="topBg" src="./img/home/homeTopImg@3x.png" alt="">
        <div class="learn_data">
            <h2><img class="armImg" src="./img/home/comeL.png" alt=""> 已在外教君托福 坚持托福听力 <img class="armImg" src="./img/home/comeR.png" alt=""></h2>
            <div class="data_content">
                <div class="day_hour">
                    <p class="data_items">
                        <span class="learn_num">{{learnDay}}</span>
                        <span class="learn_num">天</span>
                        <img class="learn_data_logo" src="./img/home/dayY2.png" alt=""><br>
                        <span class="learn_title">学习天数</span>
                    </p>
                    <p class="data_items">
                        <span class="learn_num">{{learnMin}}</span>
                        <span class="learn_num" v-show="TimeH">小时</span>
                        <span class="learn_num" v-show="TimeM">分钟</span>
                        <img class="learn_data_logo" src="./img/home/clockG2x2.png" alt=""><br>
                        <span class="learn_title">总时长</span>
                    </p>
                </div>
                <div class="num_word">
                    <p class="data_items">
                        <span class="learn_num">{{questionNum}}</span>
                        <span class="learn_num">道</span>
                        <img class="learn_data_logo" src="./img/home/abcLogo2.png" alt=""> <br>
                        <span class="learn_title">练习题数</span>
                    </p>
                    <p class="data_items">
                        <span class="learn_num">{{learnWord}}</span>
                        <span class="learn_num">个</span>
                        <img class="learn_data_logo" src="./img/home/wordB2.png" alt=""><br>
                        <span class="learn_title">掌握词汇</span>
                    </p>
                </div>
                <div class="shareBtn" @click="shareFun"><img src="./img/home/shareBtnImg.png" alt=""></div>
            </div>


        </div>
    </div>
    <!--练习地图-->
    <div class="ex_content" v-show="isShowMap">
        <img class="mapBg" src="./img/mapBg@2x.png" alt="">
        <ul class="map_ul">
            <li v-for="item in mapData" :class='font+item.name_cn.length' @click="mapTypeFun(item.id,item.openid)">
                {{item.name_cn}}
                <div v-show="item.openid==null" class="stateRed"></div>
                <div class="starArea">
                    <img v-show="item.score>=1" src="./img/mapStarY1.png" alt="">
                    <img v-show="item.score>=2" src="./img/mapStarY2.png" alt="">
                    <img v-show="item.score>=3" src="./img/mapStarY3.png" alt="">
                    <img v-show="item.score<1"  src="./img/mapStarN.png" alt="">
                    <img v-show="item.score<2"  src="./img/mapStarN.png" alt="">
                    <img v-show="item.score<3"  src="./img/mapStarN.png" alt="">
                </div>
            </li>
        </ul>
    </div>
    <!--错题集-->
    <div class="er_content" v-show="isShowError">
        <h3>错题题型分布</h3>
        <div class="canvasDiv">
            <canvas id="canvas" width="1120px" height="1120px" ></canvas>
        </div>
        <h3>错题分类集</h3>
        <div class="errTypeDiv">
            <div class="data2Div" v-for="item in data2">
                {{item.categroyName}} <br>
                {{item.errorQuestionNumber}} 个
            </div>
        </div>
    </div>
    <!--分享页面-->
    <div v-show="isShowShare" @click="closeShareFun" class="sharePage">
        <img src="img/home/shareImg1.png" alt="">
    </div>

    <!--导航栏-->
    <div class="bottomBar">
        <p @click="HomeFun">
            <img v-show="isShowHomeImgY" src="img/home/TPOLogoY1.png" alt=""><img v-show="isShowHomeImgN"
                                                                                 src="img/home/TPOLogoN1.png" alt=""><br>
            <span :class="{black:isHomeClick}">主页</span>
        </p>
        <p @click="MapFun">
            <img v-show="isShowMapImgY" src="img/home/mapLogoY1.png" alt=""><img v-show="isShowMapImgN"
                                                                                src="img/home/mapLogoN1.png" alt=""><br>
            <span :class="{black:isMapClick}">练习地图</span>
        </p>
        <p @click="ErrorFun">
            <img v-show="isShowErrorImgY" src="img/home/errorLogoY1.png" alt=""><img v-show="isShowErrorImgN"
                                                                                    src="img/home/errorLogoN1.png"
                                                                                    alt=""><br>
            <span :class="{black:isErrorClick}">错题集</span>
        </p>
    </div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js?v=1" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    console.log($('#canvas').attr('width'))
    const vm = new Vue({
        data: {
            learnDay: 0,
            learnMin: 0,
            questionNum: 0,
            learnWord: 0,
            isShowHomeImgY: true,
            isShowHomeImgN: false,
            isShowMapImgY: false,
            isShowMapImgN: true,
            isShowErrorImgY: false,
            isShowErrorImgN: true,
            isShowHome: true,
            isShowMap: false,
            isShowError: false,
            isHomeClick: false,
            isMapClick: false,
            isErrorClick: false,
            isShowShare: false,
            mapData: '',
            font: 'font',
            data2: '',
            data1: '',
            TimeH:false,
            TimeM:true,
        },
        methods: {
            HomeFun: function () {
                this.isHomeClick = true;
                this.isMapClick = false;
                this.isErrorClick = false;
                this.isShowHome = true;
                this.isShowMap = false;
                this.isShowError = false;

                this.isShowHomeImgY = true;
                this.isShowHomeImgN = false;
                this.isShowMapImgY = false;
                this.isShowMapImgN = true;
                this.isShowErrorImgY = false;
                this.isShowErrorImgN = true;

            },
            MapFun: function () {
                this.isShowShare = false;
                this.isHomeClick = false;
                this.isMapClick = true;
                this.isErrorClick = false;
                this.isShowHome = false;
                this.isShowMap = true;
                this.isShowError = false;

                this.isShowHomeImgY = false;
                this.isShowHomeImgN = true;
                this.isShowMapImgY = true;
                this.isShowMapImgN = false;
                this.isShowErrorImgY = false;
                this.isShowErrorImgN = true;
            },
            ErrorFun: function () {
                this.isShowShare = false;
                this.isHomeClick = false;
                this.isMapClick = false;
                this.isErrorClick = true;
                this.isShowHome = false;
                this.isShowMap = false;
                this.isShowError = true;

                this.isShowHomeImgY = false;
                this.isShowHomeImgN = true;
                this.isShowMapImgY = false;
                this.isShowMapImgN = true;
                this.isShowErrorImgY = true;
                this.isShowErrorImgN = false;

            },
            shareFun: function () {
                this.isShowShare = true;
            },
            closeShareFun: function () {
                this.isShowShare = false;
            },
            httpDataFun: function () {
                //首页的数据请求
                this.$http.post(URL + '/tpo/index/data', {}).then(function (res) {
                    console.log(res);
                    if (res.data.status == 200) {
                        this.learnDay = res.data.data.studyDays;
                        this.learnMin = res.data.data.studyDuration;
                        if (this.learnMin > 3600) {
                          var hours =this.learnMin/3600;
                          this.learnMin=hours.toFixed(1);
                          this.TimeH=true;
                          this.TimeM=false;
                        }else{
                            var mins=this.learnMin/60;
                            this.learnMin=mins.toFixed(1);
                            this.TimeH=false;
                            this.TimeM=true;
                        }


                        this.questionNum = res.data.data.questionNumber;
                        this.learnWord = res.data.data.quantityOfVocabulary;
                        this.HomeFun();
                    }
                    if (res.data.status == 400) {
                        console.log(res.data.status)
                        alert('home400' + res.data.message);
                    }
                    if (res.data.status == 500) {
                        console.log(res.data.status)
                        alert('home500' + res.data.message);
                    }
                }, function (res) {
                    console.log('失败');
                    console.log(res.status);
                    console.log(res);
                });
                //地图的数据请求
                this.$http.post(URL + '/tpo/exercise/categories', {}).then(function (res) {
                    console.log(res.status);
                    if (res.data.status == 200) {
                        console.log(res.data.data)
                        this.mapData = res.data.data;
                    }
                    if (res.data.status == 400) {
                        alert('map400' + res.data.message);
                    }
                    if (res.data.status == 500) {
                        alert('map500' + res.data.message);
                    }
                }, function (res) {
                    console.log('失败');
                    console.log(res.status);
                    console.log(res);
                })
                //错题数据请求
                this.$http.post(URL + '/tpo/exercise/statistics/errorsQuestion', {}).then(function (res) {
                    console.log(res.status);
                    if (res.data.status == 200) {
                        console.log(res.data.data)
                        //做过题的canvas的情况
                        this.data2 = res.data.data.data2;
                        this.data1 = res.data.data.data1;
                        var a = res.data.data.data1[0].error_question_percent;
                        var b = res.data.data.data1[1].error_question_percent;
                        var c = res.data.data.data1[2].error_question_percent;
                        var d = res.data.data.data1[3].error_question_percent;
                        var e = res.data.data.data1[4].error_question_percent;
                        var f = res.data.data.data1[5].error_question_percent;
                        var g = res.data.data.data1[6].error_question_percent;
                        var h = res.data.data.data1[7].error_question_percent;
                         console.log($('#canvas').attr('width'))
                        var mW = 1800;
                        var mH = 1000;
                        var mData = [
                            ['主旨题', a],
                            ['目的', b],
                            ['细节题', c],
                            ['句子功能题', d],
                            ['说话人态度题', e],
                            ['组织结构题/分类信息题', f],
                            ['内容连接题/排序题', g],
                            ['推论题', h],
//                            ['主旨题', 15],
//                            ['目的', 20],
//                            ['细节题', 30],
//                            ['句子功能题', 40],
//                            ['说话人态度题', 60],
//                            ['组织结构题/分类信息题', 80],
//                            ['内容连接题/排序题', 100],
//                            ['推论题', 55],
                        ];
                        var mCount = mData.length; //边数 6
                        var mCenter = mH / 2; //中心点150
                        var mCenterX = mW / 2; //中心点150
                        var mCenterY = mH / 2; //中心点150
                        var mRadius = mCenterY - 150; //半径(减去的值用于给绘制的文本留空间)100
                        var mAngle = Math.PI * 2 / mCount; //角度60
                        var mCtx = null;
                        var mColorPolygon = '#494949'; //多边形颜色
                        var mColorLines = '#575757'; //顶点连线颜色
                        var mColorText = '#000000'; //文本颜色

//初始化
                        (function () {
                            var canvas = document.getElementById("canvas")
                            canvas.height = mH;
                            canvas.width = mW;
                            mCtx = canvas.getContext('2d');
                            drawPolygon(mCtx); //绘制背景
                            drawLines(mCtx); //绘制顶点连线
                            drawText(mCtx); //绘制文本
                            drawRegion(mCtx); //绘制数据区域
                            drawCircle(mCtx); //画点
                        })();

// 绘制多边形边
                        function drawPolygon(ctx) {
                            ctx.save();
                            ctx.strokeStyle = mColorPolygon;
                            var r = mRadius / mCount; //单位半径;
                            //画6个圈
                            for (var i = 0; i < mCount; i++) {
                                ctx.beginPath();
                                var currR = r * (i + 1); //当前半径
                                //画6条边
                                for (var j = 0; j < mCount; j++) {
                                    ctx.arc(mCenterX, mCenterY, currR, 0, 2 * Math.PI);
                                }
                                ctx.closePath()
                                ctx.stroke();
                            }

                            ctx.restore();
                        }

//顶点连线及画点
                        function drawLines(ctx) {
                            ctx.save();
                            ctx.strokeStyle = mColorLines;
                            for (var i = 0; i < mCount; i++) {
                                ctx.beginPath();
                                var y = mCenterY + (mRadius + 60) * Math.cos(mAngle * i);
                                var x = mCenterX + (mRadius + 60) * Math.sin(mAngle * i);
                                ctx.moveTo(mCenterX, mCenterY);
                                ctx.lineTo(x, y);
                                ctx.stroke();
                                ctx.beginPath();
                                ctx.arc(x, y, 2, 0, Math.PI * 2);
                                ctx.fillStyle = '#fff000';
                                ctx.fill();
                            }

                            ctx.restore();
                        }

//绘制文本
                        function drawText(ctx) {
                            ctx.save();
                            var fontSize = mCenter / 10;
                            ctx.font = fontSize + 'px Microsoft Yahei';
                            ctx.fillStyle = mColorText;
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenterY + (mRadius + 64) * Math.cos(mAngle * i);
                                var x = mCenterX + (mRadius + 64) * Math.sin(mAngle * i);
                                if (mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
                                    ctx.fillText(mData[i][0], x, y + fontSize);
                                } else if (mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
                                    ctx.fillText(mData[i][0], x, y);
                                } else if (mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
                                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
                                } else {
                                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
                                }

                            }

                            ctx.restore();
                        }

//绘制数据区域
                        function drawRegion(ctx) {
                            ctx.save();

                            ctx.beginPath();
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenterY + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                                var x = mCenterX + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

                                ctx.lineTo(x, y);
                            }
                            ctx.closePath();
                            ctx.fillStyle = 'rgba(255,240,0,0.9)';
                            ctx.fill();

                            ctx.restore();
                        }

//画点
                        function drawCircle(ctx) {
                            ctx.save();
                            var r = 2;
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenterY + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                                var x = mCenterX + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

                                ctx.beginPath();
                                ctx.arc(x, y, r, 0, Math.PI * 2);
                                ctx.fillStyle = '#fff000';
                                ctx.fill();
                            }

                            ctx.restore();
                        }
                    }
                    if (res.data.status == 400) {
                        alert('canvas400' + res.data.message);
                    }
                    //没有做题的canvas显示情况
                    if (res.data.status == 500) {
                        alert('canvas500' + res.data.message);

                        console.log(res.data.data)
                        this.data2 = res.data.data.data2;
                        this.data1 = res.data.data.data1;
                        var mW = 280;
                        var mH = 280;
                        var mData = [
                            ['主旨题', 0],
                            ['目的', 0],
                            ['细节题', 0],
                            ['句子功能题', 0],
                            ['说话人态度题', 0],
                            ['分类信息题', 0],
                            ['排序题', 0],
                            ['推论题', 0],
                        ];
                        var mCount = mData.length; //边数 6
                        var mCenter = mW / 2; //中心点150
                        var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)100
                        var mAngle = Math.PI * 2 / mCount; //角度60
                        var mCtx = null;
                        var mColorPolygon = '#d4d9cc'; //多边形颜色
                        var mColorLines = '#d4d9cc'; //顶点连线颜色
                        var mColorText = '#000000'; //文本颜色

//初始化
                        (function () {
                            var canvas = document.getElementById("canvas")
                            // document.body.appendChild(canvas);
                            canvas.height = mH;
                            // console.log(mH);
                            canvas.width = mW;
                            mCtx = canvas.getContext('2d');

                            drawPolygon(mCtx); //绘制背景
                            drawLines(mCtx); //绘制顶点连线
                            drawText(mCtx); //绘制文本
                            drawRegion(mCtx); //绘制数据区域
                            drawCircle(mCtx); //画点
                        })();

// 绘制多边形边
                        function drawPolygon(ctx) {
                            ctx.save();
                            ctx.strokeStyle = mColorPolygon;
                            var r = mRadius / mCount; //单位半径;
                            //画6个圈
                            for (var i = 0; i < mCount; i++) {
                                ctx.beginPath();
                                var currR = r * (i + 1); //当前半径
                                //画6条边
                                for (var j = 0; j < mCount; j++) {
                                    ctx.arc(mCenter, mCenter, currR, 0, 2 * Math.PI);
                                }
                                ctx.closePath()
                                ctx.stroke();
                            }

                            ctx.restore();
                        }

//顶点连线及画点
                        function drawLines(ctx) {
                            ctx.save();
                            ctx.strokeStyle = mColorLines;
                            for (var i = 0; i < mCount; i++) {
                                ctx.beginPath();
                                var y = mCenter + (mRadius + 60) * Math.cos(mAngle * i);
                                var x = mCenter + (mRadius + 60) * Math.sin(mAngle * i);
                                ctx.moveTo(mCenter, mCenter);
                                ctx.lineTo(x, y);
                                ctx.stroke();
                                ctx.beginPath();
                                ctx.arc(x, y, 2, 0, Math.PI * 2);
                                ctx.fillStyle = '#fff000';
                                ctx.fill();
                            }

                            ctx.restore();
                        }

//绘制文本
                        function drawText(ctx) {
                            ctx.save();
                            var fontSize = mCenter / 12;
                            ctx.font = fontSize + 'px Microsoft Yahei';
                            ctx.fillStyle = mColorText;
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenter + (mRadius + 60) * Math.cos(mAngle * i);
                                var x = mCenter + (mRadius + 60) * Math.sin(mAngle * i);
                                if (mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
                                    ctx.fillText(mData[i][0], x, y + fontSize);
                                } else if (mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
                                    ctx.fillText(mData[i][0], x, y);
                                } else if (mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
                                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
                                } else {
                                    ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
                                }

                            }

                            ctx.restore();
                        }

//绘制数据区域
                        function drawRegion(ctx) {
                            ctx.save();

                            ctx.beginPath();
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                                var x = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

                                ctx.lineTo(x, y);
                            }
                            ctx.closePath();
                            ctx.fillStyle = 'rgba(255,240,0,0.9)';
                            ctx.fill();

                            ctx.restore();
                        }

//画点
                        function drawCircle(ctx) {
                            ctx.save();
                            var r = 2;
                            for (var i = 0; i < mCount; i++) {
                                var y = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
                                var x = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

                                ctx.beginPath();
                                ctx.arc(x, y, r, 0, Math.PI * 2);
                                ctx.fillStyle = '#fff000';
                                ctx.fill();
                            }

                            ctx.restore();
                        }
                    }
                }, function (res) {
                    console.log('失败');
                    console.log(res.status);
                    console.log(res);
                })
            },
            mapTypeFun: function (data, openId) {

                if (openId == null) {
                    this.$http.post(URL + '/tpo/exercise/categories/click/' + data, {}).then(function (res) {
                        console.log(res.data.data)
                    }, function (res) {
                        console.log(res.data.data)
                    })

                }
                window.location.href = 'type.html?id=' + data;

            },
        },


    }).$mount('#wrap');
    vm.httpDataFun();
</script>

